<template>
  <view class="bg-[#f5f5f5] p-[24rpx] rounded-xl shadow-md">
    <nut-tabs v-model="tab" class="bg-white">
      <nut-tab-pane title="推广明细" pane-key="1">
        <view class="max-h-[50vh] overflow-y-auto">
          <!-- 推广明细列表 -->
          <template v-if="promotionList.length > 0">
            <view v-for="(item, index) in promotionList" :key="index" class="bg-white p-[24rpx] border-b-[1px] border-b-solid border-b-[#f0f0f0] last:border-b-0">
              <view class="flex justify-between items-center mb-[16rpx]">
                <text class="text-[#333] text-[28rpx] font-medium">{{ item.create_time }}</text>
                <text class="text-[#FF4D4F] text-[32rpx] font-bold">¥{{ item.commission }}</text>
              </view>
              <view class="mb-[12rpx]">
                <!-- <text class="text-[#666] text-[24rpx]">会员名称：</text> -->
                <text class="text-[#165DFF] text-[24rpx]"> {{ item.name }} </text>
                <text class="text-[#333] text-[24rpx] ml-2"> {{ item.title }}</text>
              </view>
              <!-- <view>
                <text class="text-[#666] text-[24rpx]">标题：</text>
                <text class="text-[#333] text-[24rpx]">{{ item.title }}</text>
              </view> -->
            </view>
          </template>
          <!-- 空数据提示 -->
          <template v-else>
            <nut-empty description="暂无推广明细数据" />
          </template>
        </view>
      </nut-tab-pane>

      <nut-tab-pane title="推广列表" pane-key="2">
        <view class="max-h-[50vh] overflow-y-auto">
          <!-- 推广列表 -->
          <template v-if="roleList.length > 0">
            <view v-for="(item, index) in roleList" :key="index" class="bg-white p-[24rpx] border-b-[1px] border-b-solid border-b-[#f0f0f0] last:border-b-0">
              <view class="flex justify-between items-center mb-[16rpx]">
                <text class="text-[#165DFF] text-[28rpx] font-medium">{{ item.name }}</text>
                <view class="flex items-center">
                  <text class="text-[#333] text-[24rpx] mr-2">是否推广员：
                    <text class="text-[#009688]" v-if="item.promoter==1">是</text>
                    <text class="text-[#ff0000]" v-else>否</text>
                  </text>
                  <nut-button type="success" size="mini" v-if="userStore?.userInfo?.team_leader == 1" @click="handlePromoterChange(item, index)">切换</nut-button>
                  <!-- <nut-switch :disabled="userStore.userInfo.team_leader != 1" v-model="item.isPromoter" @change="handlePromoterChange(item, index)" active-color="#165DFF" /> -->
                </view>
              </view>
              <view class="mb-[12rpx]">
                <!-- <text class="text-[#666] text-[24rpx]">会员名称：</text> -->
                <text class="text-[#999] text-[24rpx]">{{ item.create_time }}</text>
              </view>
              <!-- <view class="flex items-center">
                <text class="text-[#666] text-[24rpx] mr-[8rpx]">是否推广员：</text>
                <text class="text-[24rpx] px-[12rpx] py-[4rpx] rounded-full" :class="item.promoter ? 'text-[#165DFF] bg-[#E6F4FF]' : 'text-[#999] bg-[#F5F5F5]'">
                  {{ item.promoter ? "是" : "否" }}
                </text>
              </view> -->
            </view>
          </template>
          <!-- 空数据提示 -->
          <template v-else>
            <nut-empty description="暂无推广列表数据" />
          </template>
        </view>
      </nut-tab-pane>
    </nut-tabs>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { post } from "../utils/request";
import { useUserStore } from "../store/user";
import Taro from "@tarojs/taro";
const userStore = useUserStore();
console.log("userStore ==--==-==", userStore);
/**
 * 当前激活的tab
 */
const tab = ref("1");

/**
 * 推广员状态切换处理
 * @param item 当前项目
 * @param index 索引
 */
const handlePromoterChange = (item: any, index: number) => {
  console.log("item", item);
  console.log(`推广员状态变更: ${item.name} - ${item.promoter ? "开启" : "关闭"}`, item.promoter);
  // 这里可以添加API调用逻辑
  if(!hasInit.value) return;
  post("/my/updatePromoter", {
    id: item.id,
    status: item.promoter == 1 ? 0 : 1,
  }).then((res) => {
    console.log("推广员状态变更：", res);
    if(res.code == 200) {
      Taro.showToast({
        title: "推广员状态变更成功",
        icon: "none",
      });
    }
    else{
      Taro.showToast({
        title: res.data,
        icon: "error",
      });
    }
    getPromotionRole();
  });
};

/**
 * 推广明细数据
 * 包含：日期、会员名称、标题、佣金
 */
const promotionList = ref([
  {
    date: "2024-01-15",
    memberName: "张三",
    title: "新用户注册推广",
    commission: "50.00",
  },
]);

/**
 * 推广列表数据
 * 包含：日期、会员名称、是否推广员(开关)
 */
const roleList = ref([
  {
    date: "2024-01-15",
    memberName: "张三",
    isPromoter: true,
  },
]);

onMounted(() => {
  getPromotionList();
  getPromotionRole();
});

function getPromotionList() {
  post("/my/recommend", {
    pageNo: 1,
    pageSize: 100,
  }).then((res) => {
    promotionList.value = res.data.map((item) => item.columns);
  });
}

const hasInit = ref(false);

function getPromotionRole() {
  post("/my/promoterList", {
    pageNo: 1,
    pageSize: 100,
  }).then((res) => {
    roleList.value = res.data.map((item) => item.columns);
    setTimeout(() => {
      hasInit.value = true;
    }, 100);
  });
}
</script>
